<template>
	<div class="home">
		<header class="padding">
			<van-search v-model="search" placeholder="搜索: 酒店/景点/攻略" >
				<template #label>
					<span @click="this.$router.push({path: '/city'})">{{address}}</span>
				</template>
			</van-search>
			<div>
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="(item,index) in 5">
					  <img :src="require('../assets/image/picture/home/' + (index + 1) + '.jpeg')" style="border-radius: 10px; width: 100%; height: 100%;">
					</van-swipe-item>
				</van-swipe>
			</div>
			<div class="header_nav">
				<div v-for="(item, index) in link" :key="index" class="nav" :style="{'background': item.background}">
					<img :src="item.icon" width="30px" height="30px" >
					<p>{{item.name}}</p>
				</div>
			</div>
			<div class="header_nav">
				<div id="header_left">
					<img src="../assets/image/mark/bargain.png" width="75px" height="25px">
					<div>
						
					</div>
				</div>
				<div id="header_right">
					<img src="../assets/image/mark/select_top.png" width="60px" height="23px">
					<div>
					</div>
				</div>
			</div>
		</header>
		<main class="padding">
			<div class="module">
				<div class="module_title">
					<h3 class="text">游周边</h3>
				</div>
				<div>
					<van-skeleton style="padding: 0px; display:flex; flex-direction: column;" :loading="aroundLoading">
					  <template #template>
					    <div style="display: flex; width: 95%;" class="skeleton_item" v-for="item in 2">
					      <van-skeleton-image />
					      <div style="flex:1; margin-left: 16px;">
					        <van-skeleton-paragraph v-for="(item, index) in 4" :row-width="index == 0 ? '60%' : '100%'"/>
					      </div>
					    </div>
					  </template>
					  <div>
						  abc
					  </div>
					</van-skeleton>
				</div>
			</div>
			<div class="module">
				<div class="module_title">
					<h3 class="text">为您推荐</h3>
				</div>
				<div>
					<van-skeleton style="padding: 0px;" :loading="recommendLoading">
					  <template #template>
					    <div class="recommendModuleDisplay">
							<div v-for="item in 4" class="skeleton_item recommendItem">
								<van-skeleton-image style="width: 100%; min-height: 100px;"/>
								<div class="recommendItemText">
								  <van-skeleton-paragraph v-for="(item, index) in 2" :row-width="index == 0 ? '80%' : '100%'"/>
								</div>
							</div>
					    </div>
					  </template>
					  <Waterfall :lazyload="false" :breakpoints="this.$breakpoints" :gutter="5" :list="recommendList" style="background:none;">
						   <template #item="{ item, url, index }">
							   <div class="fall_item" @click="this.$router.push({path:'/article_details'})">
								   <van-image  :src="item.image" style="width: 100%; min-height: 100px;"/>
								   <van-icon name="play-circle" class="isVideo" size="25px" v-if="item.video"/>
								   <div class="info">
									  <p class="ellipsis">{{item.articleTitle}}</p>
									  <p class="position"><van-icon name="location" v-if="item.position.length != 0"/>{{item.position}}</p>
									  <div class="user_info">
										  <div>
											  <van-icon name="eye-o" /> {{item.browse}}
										  </div>
										  <div>
											  <span class="username ellipsis" >{{item.author.username}}</span>
											  <img :src="item.author.avatar" style="width: 30px; height: 30px; border-radius: 50%; vertical-align: middle;">
										  </div>
									  </div>
									  <p class="time"><van-icon name="underway" /><span>{{item.publishTime}}</span></p>
								   </div>
							   </div>
						   </template>
					  </Waterfall>
					</van-skeleton>	
				</div>
			</div>
			<div>
				<van-loading color="red" vertical v-if="loadingShow">加载更多...</van-loading>
			</div>
			<van-back-top />
		</main>
		<footer>
			<img src="../assets/image/picture/footImage.jpg" width="100%" style="border-radius: 10px;">
			<p>&copy; 向日葵旅行 感谢携程提供数据</p>
		</footer>
	</div>
</template>

<script>
import {Waterfall} from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
export default{
	data(){
		return{
			link:[{
				name: '酒店',
				icon: require('../assets/image/icon/hotel.png'),
				to: '',
				background: '#FA7053'
			},{
				name: '机票',
				icon: require('../assets/image/icon/airpot.png'),
				to: '',
				background: '#4394FA'
			},{
				name: '火车票',
				icon: require('../assets/image/icon/train.png'),
				to: '',
				background: '#6089FF'
			},{
				name: '攻略/景点',
				icon: require('../assets/image/icon/strategy.png'),
				to: '',
				background: '#43D0B4'
			},{
				name: '美食',
				icon: require('../assets/image/icon/food.png'),
				to: '',
				background: '#FF983F'
			}],
			recommendLoading: true,
			recommendList:[],
			aroundLoading: true,
			aroundList:[],
			loadingShow: false,
			search: '',
			address:'',
			userInfo:null,
		}
	},
	mounted(){
		window.addEventListener("scroll", () => {
			let scrollTop =window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动条
			let windowHeight = document.body.clientHeight - document.documentElement.clientHeight;
			if(scrollTop > windowHeight && this.recommendList.length != 0){
				this.loadingShow = true;
				this.getRecommendList();
			}else
				this.loadingShow = false;
		});
		this.userInfo = sessionStorage.getItem("user-info")
		if(this.userInfo == null){
			this.getLocation(true);
		}else{
			this.getRecommendList();
		}
	},
	methods:{
		getLocation(flag){
			const geolocation = new window.BMap.Geolocation();
			geolocation.getCurrentPosition((result) => {
				let obj = {
					address:{
						city: result.address.city,
						longitude: result.longitude,
						latitude: result.latitude,
					},
					type: 'tourphoto_all'
				}
				this.address = result.address.city;
				obj = JSON.stringify(obj);
				sessionStorage.setItem("user-info", obj);
				if(flag){
					this.userInfo = obj;
					this.getRecommendList();
				}
			});
		},
		getRecommendList(){
			let userInfo = JSON.parse(this.userInfo);
			this.address = userInfo.address.city;
			this.$http.get(this.$api.COMMUNITY_RECOMMEND_LIST, {
				params:{
					type: userInfo.type,
					cityName: userInfo.searchCity == null ? userInfo.address.city : userInfo.searchCity,
					size: 10
				}
			}).then(result => {
				if(result.code == 200){
					this.recommendLoading = false;
					this.recommendList.push(...result.body);
					this.loadingShow = false;
				}
			})
		},
	},
	components:{
		Waterfall,
	}
}
</script>

<style scoped>
	@import "../assets/css/home.css";
</style>